
import { Image,Button, Input, DatePicker, Space, Table, Tag, Pagination } from 'antd';
import './UserM.css';
import { useEffect, useState } from 'react';
import { useHistory } from 'react-router-dom';
import http from '../../utils/http';


const UserM = () => {
    //日期 
    function onChange(value, dateString) {
        console.log('Selected Time: ', value);
        console.log('Formatted Selected Time: ', dateString);
    }
    function onOk(value) {
        console.log('onOk: ', value);
    }
    //表格
    const { Column, ColumnGroup } = Table;
    //history跳转
    const his = useHistory();
    //跳转到订单页面
    let toOrder = (row) => {
        sessionStorage.setItem('orderId',row.id);
        his.push('/admin/order/Order');
    }
    //分页
    function itemRender(current, type, originalElement) {
        if (type === 'prev') {
            return <a>上一页</a>;
        }
        if (type === 'next') {
            return <a>下一页</a>;
        }
        return originalElement;
    }
    //当前页数
    const [page, setPage] = useState(1);
    //每页条数
    const [pageSize, setpageSize] = useState(10);
    //总条数
    const [total, setTotal] = useState(0);
    //list容器
    const [list, setList] = useState([]);
    //获取所有角色信息的函数
    const allUserM=()=>{
        http({
            url:'huangying/getAllUserM',
            method:"get",
            data:{
                page:page,
                pageSize:pageSize
            }
        }).then((res)=>{
            console.log(res);
            setList(res?.data?.data);
            setTotal(res?.data?.count);
        })
    }
    //inp 条件查询
    const [inp1,setinp1]=useState()
    const inp=(v)=>{
        setinp1(v.target.value)

    }
    const sele=()=>{
        http({
            url:'huangying/getWhere',
            method:'get',
            data:{
                inp:inp1
            }
        }).then((res)=>{
            console.log(res.data.length);
            setList(res.data);
            setTotal(res.data.count);
        })
    }
    //挂载后
    useEffect(() => {
        allUserM()
    }, [])
    //分页的函数
    let pageChange = (page, pageSize) => {
        setPage(page);
        //查询角色信息
        http({
            url: '/huangying/getAllUserM',
            method: 'get',
            data: {
                page,
                pageSize
            }
        }).then((res) => {
            setList(res.data.data);
            setTotal(res.data.length);
        })
    }
    
    //清除筛选条件按钮
    const clear = () => {
        setinp1('')
        allUserM()
    }
    return (
        <div className="detail-m hy">
            {/* 搜索 */}
            <div className="d-f mt-3 x-s-a">
                <span>关键词</span>
                <Input className="inp" placeholder="手机号/微信昵称/店铺名称" value={inp1} onChange={inp}/>

                {/* 日期 */}
                <Space direction="vertical" size={12}>
                    <DatePicker showTime onChange={onChange} onOk={onOk} placeholder="注册时间" />
                </Space>

                {/* 按钮 */}
                <Button type="primary" onClick={sele}>搜索</Button>

                <span className="span_1" onClick={clear}>清除筛选条件</span>
            </div>
            {/* 表格 */}
            <div className="mt-5">
            <Table
                        dataSource={list}
                        id='tables'
                        rowKey='id'
                        pagination={false}
                    >
                         <Column title="用户头像" key='image_url'
                            render={(t, v) => (
                                <Space size="middle">
                                    <div className=' y-c'>
                                        <Image src={v.image_url} width={50} height={50}></Image>
                                    </div>
                                </Space>
                            )}
                        />
                        <Column title="用户信息" dataIndex="user_name" key="user_name" />
                       
                        <Column title="来源店铺" key="storeType"
                            render={(t, v) => (
                                <Space size="middle">
                                    <span className='font-sm'>{v.storeType == 0 ? '所有店铺' : '指定店铺'}</span>
                                </Space>
                            )}
                        />
                        <Column title="手机号码" dataIndex="tel" key="tel" />
                        <Column title="注册时间" dataIndex="create_time" key="create_time" />
                        <Column title="成交次数" key="goodsId"
                            render={(t, v) => (
                                <Space size="middle">
                                    {!v.goodsId ? '无' :
                                        <div className='d-f y-c'>
                                            <Image src={v.goodsImageUrl} width={50} height={50}></Image>
                                            <div className='d-f f-c y-c'>
                                                <span className='font-sm'>{v.information}</span>
                                                <span className='font-sm'>建议售价:<span className='red'>￥{v.sellPrice}</span></span>
                                            </div>
                                        </div>
                                    }
                                </Space>
                            )}
                        />
                        <Column
                            title="金额"
                            dataIndex="state"
                            key="state"
                            render={(i, v) => (
                                <Space size="middle">
                                    <a className={v.state == 0 ? '' : 'red'}>{v.state == 0 ? '启用' : '禁用'}</a>
                                </Space>
                            )}
                        />
                        <Column
                            title="操作"
                            key="action"
                            render={(i, v) => (
                                <Space size="middle">
                                    <a onClick={toOrder}>订单</a>
                                </Space>
                            )}
                        />
                    </Table>
            </div>
            {/* 分页 */}
            <div className="nav ">
                <Pagination
                    defaultCurrent={1}
                    defaultPageSize={pageSize}
                    current={page}
                    total={total}
                    showSizeChanger
                    size='small'
                    pageSizeOptions={[pageSize, pageSize * 2, pageSize * 3]}
                    onChange={(page, pageSize) => pageChange(page, pageSize)}
                    
                />
            </div>
        </div>

    )
}
export default UserM;